<template>
	<div class="system-common-container layout-pd">
		<el-card shadow="hover">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item  :label-width='70' label='日期' >
                    <el-date-picker class='ml10' v-model='state.queryParams.selectDate' type='date'
                          date-format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder='日期' :disabled-date="disabledDate" :clearable="false"/>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'esOrder:query'"> 查询
						</el-button>
						<el-button icon="ele-Refresh" @click="resetQuery" v-auth="'esOrder:query'"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow='hover' style='margin-top: 8px;'>
        <el-table max-height="1000px" :data='state.data' stripe highlight-current-row border>
            <el-table-column header-align="center" prop="orderNo" label="业务订购能开订单流水号" align="center" width="280" show-overflow-tooltip />
            <el-table-column header-align="center" prop="orderId" label="封装平台订单号" align="center" min-width="280" show-overflow-tooltip />
            <el-table-column header-align="center" prop="canceloId" label="业务退订流水号" align="center" min-width="280" show-overflow-tooltip />
            <el-table-column header-align="center" prop="recdate" label="退订时间" align="center" min-width="280" show-overflow-tooltip />
        </el-table>
        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
            :page-sizes="[500]" v-model:current-page="state.queryParams.pageNum" background
            v-model:page-size="state.queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="state.total" />
		</el-card>
	</div>
</template>

<script setup lang="ts" name="esUnsubscribe">
import { defineAsyncComponent, ref, reactive, onMounted, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { convertLocalDate, datePickerShortcuts } from '/@/utils/formatTime';

import SysEsUnsubscribeMangerApi from '/@/api/exocytosis/unsubscribeManger/index';
import SysEsMerchantApi from '/@/api/exocytosis/merchant';
import SysEsChannelApi from '/@/api/exocytosis/channel';
import {optionDict} from "/@/const/dict";
import {sysBaseDict} from "/@/api/models";

// 定义变量内容
const shortcuts = datePickerShortcuts();
const ruleFormRef = ref();

const state = reactive({
	loading: false,
	data: [] ,
	total: 0 as any,
	queryParams: {
		pageNum: 1,
		pageSize: 500,
        selectDate: undefined,
	},
	merchantDict: [] as sysBaseDict[],
	channelDict: [] as sysBaseDict[],
});

// 页面加载时
onMounted(async () => {
	getYMD();
	await merchantDictQuery();
	await channelDictQuery();
});

const handleQuery = async () => {
    state.loading = true;
    SysEsUnsubscribeMangerApi().queryUnsubscribeRecord(state.queryParams).then((res) => {
        state.data = [];
        if (res.data.resCode != '0000') {
            ElMessage.error(res.data.resMessage);
        } else {
            const jsonData: any = JSON.parse(res.data.result);
            if (jsonData.code != '10000'){
                ElMessage.error(jsonData.message);
            } else {
                state.data = jsonData.data?.orderInfo?? [];
                state.total = jsonData.data?.total;
            }
        }
        state.loading = false;
    });
};

// 重置
const resetQuery = () => {
	state.data = [];
	getYMD();
};
// 改变页面容量
const onHandleSizeChange = (val: number) => {
    state.queryParams.pageSize = val;
    handleQuery();
};

// 改变页码序号
const onHandleCurrentChange = (val: number) => {
    state.queryParams.pageNum = val;
    handleQuery();
};
// 商户列表
const merchantDictQuery = async () => {
	await SysEsMerchantApi().queryAll().then((res) => {
		if (res.data.resCode === '0000')
			state.merchantDict = res.data.result ?? [];
	});
};

// 渠道列表
const channelDictQuery = async () => {
	await SysEsChannelApi().queryAll().then((res) => {
		if (res.data.resCode === '0000')
			state.channelDict = res.data.result ?? [];
	});
};

// 日期不可选范围
const disabledDate = (time: Record<string, any>): boolean => {
    const today = new Date(); // 获取今天的日期
    today.setHours(0, 0, 0, 0); // 将时间设置为当天的零点
    return time.getTime() > today.getTime(); // 禁用今天之后的所有日期
}

const getYMD = () => {
	// let myDate = new Date()
	// let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
	// let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
	// let myToday = myDate.getDate(); //获取当前日(1-31)
	// myMonth = myMonth > 9 ? myMonth : '0' + myMonth
	// myToday = myToday > 9 ? myToday : '0' + myToday
	// let nowDate = myYear + '-' + myMonth + '-' + myToday;
	// state.queryParams.selectDate = nowDate;
	// return nowDate
    const nowDate = new Date();
    const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds()
    };
    const newmonth = date.month >= 10 ? date.month : "0" + date.month;
    const newday = date.date >= 10 ? date.date : "0" + date.date;
    const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
    const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
    const value =
        date.year +
        "-" +
        newmonth +
        "-" +
        newday;
    state.queryParams.selectDate = value;
};

</script>

<style scoped>
    .el-input-number {
        width: 100%;
    }
</style>
